<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/my-production-detail.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="name">我的作品</h1>
			<a class="mui-pull-right" id="compile_production">编辑</a>
		</header>
		<div class="mui-content">
			<!--优酷视频播放器-->
			<div id="player">
				<div id="dataConnected" class="mui-text-center">
					<p>正在使用移动网络</p>
					<button class="mui-btn btn-outlined">继续播放</button>
				</div>
			</div>
			<!--作品名，标签，人气等-->
			<ul class="mui-table-view" id="production_mid">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#production-info">
						基本信息
					</a>
				</li>
			</ul>
			<div id="my_production_review">
			<h5>评论</h5>
				<div id="scroll1" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view" id="review_list">
							<!--<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="../images/holder1.png">
									<div class="mui-media-body">
										<p class="review_body_name mui-pull-left">过往</p>
										<p class="review_body_date mui-pull-right">6月6日&nbsp;21:21</p><br />
										<p class="mui-ellipsis-2 review_body_text">库尔班江为了这部片子掏空了身家</p>
									</div>
								</a>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
			<div id="production-info" class="mui-popover pop-up">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<p class="type"></p>
						<p><label>浏览数量</label><span class="num" id="playNum"></span>
						<label>点赞数</label><span class="num" id="praiseNum"></span></p>
						<p class="info"><label>类型</label><span id="kind"></span></p>
						<p class="info"><label>标签</label><span id="label"></span></p>
						<p id="description"></p>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/player.youku.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui('.mui-scroll-wrapper').scroll();
			var reviewList = document.getElementById('review_list');
			var lazyLoad = mui(reviewList).imageLazyload({
				placeholder: '../images/holder1.png',
				autoDestroy: false
			});
			var videoType = null;
			var videoId = null;
			var netState; // 当前网络状态
			// 数据网络连接提示
			var dataConnected = document.getElementById("dataConnected");
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var pid = self.mypid;
				var url = baseURL + 'myOpus/getSelfOpusById/23.json?objectid=' + pid;
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.state == 1) {
						var data = data.result;
						$.each(data, function(i, o) {
							if(!/^(evaluationOpusList|type|fileName)$/.test(i)) {
								$("#" + i).text(o);
							} else {
								switch(i) {
									case 'evaluationOpusList': // 小样作品评价列表
										if(o.length) {
											for (var x = 0; x < o.length; x++) {
												var headPic = Common.artistPic + o[i].releaseid + '.jpg?' + Math.random();
												createReviewList(headPic, o[x].name,o[x].releaseTime, o[x].description);
											}
											lazyLoad.refresh(true);
										} else {
											Common.showState(reviewList, '&#xe62b;', '还没有评论', 30);
										}
										break;
									case 'type':
										videoType = o;
										if(o == '11') {
											$(".type").text('小样，视频');
										} else if(o == '12') {
											$(".type").text('小样，音频');
										} else if(o == '21') {
											$(".type").text('作品，视频');
										} else {
											$(".type").text('作品，音频');
										}
										break;
									 case 'fileName':
									 	videoId = o;
										netState = plus.networkinfo.getCurrentType()
										if(netState == 3 || Common.getUniSetting().dataAutoPlay) {
											showVideo(o);
										} else {
											$(dataConnected).show();
										}
										break;
									default:
										break;
								}
							}
						});
					} else {
						mui.toast('加载失败，请稍后再试');
					}
					plus.nativeUI.closeWaiting();
				}, function(xhr) {
					plus.nativeUI.closeWaiting();
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				
				// 使用手机流量播放视频
				mui(dataConnected).on('tap', 'button', function() {
					showVideo(videoId);
					mui.toast('正在使用数据流量播放');
				})
				
				// 连接WIFI后加载视频
				document.addEventListener('netchange', function() {
					netState = plus.networkinfo.getCurrentType();
					if(netState == 3) {
						showVideo(videoId);
					}
				})
				
				// 显示播放器
				function showVideo(id) {
					$(dataConnected).hide();
					var player = new YKU.Player('player', {
						styleid: '0',
						client_id: Common.playerClient_id,
						vid: id,
						newPlayer: true,
						autoplay: false,
						show_related: false
					});
				}
				
				document.addEventListener('reload', function() {
					mui.fire(plus.webview.currentWebview().opener(), 'reload');
					mui.back();
				})
				
				// 选项卡适应高度
				$(".mui-scroll-wrapper#scroll1").css('top', $("#player").outerHeight() + $("#production_mid").outerHeight() + $("#my_production_review h5").outerHeight() + 55 +'px');
				window.addEventListener('resize', function() {
					$(".mui-scroll-wrapper#scroll1").css('top', $("#player").outerHeight() + $("#production_mid").outerHeight() + $("#my_production_review h5").outerHeight() + 55 +'px');
				})
				/**
				 * 用于生成 artist-production.html 评论列表
				 * @param {Object} src			评论用户头像路径
				 * @param {Object} name			评论人昵称
				 * @param {Object} time			评论时间
				 * @param {Object} content		评论内容
				 */
				function createReviewList(src, name, time, content) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					var liStr = '';
					liStr += '<a href="javascript:;"><img class="mui-media-object mui-pull-left" data-lazyload="' + src + '>';
					liStr += '<div class="mui-media-body"><p class="review_body_name mui-pull-left">' + name + '</p>';
					liStr += '<p class="review_body_date mui-pull-right">' + time + '</p><br />';
					liStr += '<p class="mui-ellipsis-2 review_body_text">' + content + '</p></div></a>';
					li.innerHTML = liStr;
					reviewList.appendChild(li);
				}
				
				mui('header').on('tap', '.mui-pull-right', function() {
					var mypdemoName = document.getElementById("name").innerHTML;//标题
					var mypfdesc = document.getElementById("description").innerHTML;//描述
					var mypuid = "23";//id
					var myptype = videoType;//类别
					var myplabel = document.getElementById("label").innerHTML;//标签
					var mypkind = document.getElementById("kind").innerHTML;//类型
					Common.openWindow('compile-production.html',{ mypid:pid,src:self.src,demoName:mypdemoName,fdesc:mypfdesc,uid:mypuid,type:myptype,label:myplabel,kind:mypkind,vid:videoId});
				});
				
			})
		</script>
	</body>

</html>